<template>
  <div class="search-wrapper">
    <a-form :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }">
      <a-row gutter="4">
        <a-col md="6" sm="24">
          <a-form-item label="用户名" name="userName">
            <a-input v-model:value="formState.userName" placeholder="请输入用户名！" />
          </a-form-item>
        </a-col>
        <a-col md="6" sm="24">
          <a-form-item label="登录名" name="loginName">
            <a-input v-model:value="formState.userName" placeholder="请输入登录名！" />
          </a-form-item>
        </a-col>
        <a-col md="6" sm="24">
          <a-space>
            <a-button type="primary" @click="handleRefresh">
              <template #icon>
                <SearchOutlined />
              </template>查询
            </a-button>
            <a-button @click="handleReset">
              <template #icon>
                <ReloadOutlined />
              </template>重置
            </a-button>
          </a-space>
        </a-col>
      </a-row>
    </a-form>
  </div>
  <div class="operate-wrapper">
    <a-space>
      <a-button type="primary" @click="handleAdd">
        <template #icon>
          <PlusOutlined />
        </template>新增
      </a-button>
    </a-space>
  </div>
  <a-table :columns="columns" :data-source="tableData" :loading="loading" :pagination="false">
    <template #bodyCell="{ column, record, text }">
      <template v-if="column.key === 'userStatus'">
        <a-tag v-if="text === '0'" color="red">禁用</a-tag>
        <a-tag v-if="text === '1'" color="green">启用</a-tag>
      </template>
      <template v-if="column.key === 'action'">
        <a-space>
          <a-button type="link" size="small" @click="handleUpdate(record.userId)">【修改】</a-button>
          <a-popconfirm title="是否删除?" cancelText="取消" okText="确认" @confirm="() => handleDelete(record.value)">
            <a-button type="link" danger size="small">【删除】</a-button>
          </a-popconfirm>
        </a-space>
      </template>
    </template>
  </a-table>
  <a-pagination v-model:current="pagination.current" v-model:page-size="pagination.size" :total="pagination.total"
    :show-total="total => `共计${total}条数据`" @change="handleRefresh" style="float: right;" />
  <DataForm ref="dataForm" @ok="handleRefresh" />
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { message } from 'ant-design-vue'
import { SearchOutlined, ReloadOutlined, PlusOutlined } from '@ant-design/icons-vue'
import { page, remove, getById } from '@/api/user/index'
import DataForm from './modules/DataForm.vue'

onMounted(() => {
  handleRefresh()
})

const formState = ref({})
const tableData = ref([])
const columns = ref([
  { title: '用户名', dataIndex: 'userName', key: 'userName', width: 200, ellipsis: true },
  { title: '登录名', dataIndex: 'loginName', key: 'loginName', width: 200, ellipsis: true },
  { title: '状态', dataIndex: 'userStatus', key: 'userStatus', width: 100, ellipsis: true },
  { title: '手机号', dataIndex: 'userMobTel', key: 'userMobTel', ellipsis: true },
  { title: '操作', dataIndex: 'action', width: 240, align: 'center', key: 'action' }
])
const loading = ref(false)
const pagination = ref({
  current: 1,
  size: 10,
  total: 0
})
const dataForm = ref()

const handleRefresh = () => {
  loading.value = true
  page({ ...pagination.value }).then((res) => {
    if (res.code === 0) {
      tableData.value = res.data.records
      pagination.value.total = res.data?.total
    }
  }).finally(() => {
    loading.value = false
  })
}

const handleAdd = () => {
  dataForm.value.add('0')
}

const handleUpdate = (id) => {
  getById(id).then((res) => {
    if (res.code === 0) {
      dataForm.value.edit('1', res.data)
    } else {
      message.error(res.message)
    }
  })
}
</script>
<script>
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'user_info'
})
</script>